<template>
	<view>

		<view class="cbg-white u-m-20 u-p-b-15" style="border-radius: 7px;">
			<view class="u-m-l-30 u-m-r-30">
				<view class="u-p-t-25 u-p-b-15" style="color: #354F60;">
					<view class="cflex-r" style="align-items:center;width: 100%;">
						<view class="cflex-r" style="color: #333333;">
							请选择申请售后的原因（必选）:
						</view>
					</view>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;" v-for="(item, index) in list">
					<view style="width: 98%; float: left;" class="u-font-13 u-m-t-20">
						<view  :key="index" style="color: #7A7A7A;">
							{{index+1}}.{{item.name}}</view>
					</view>
					<view class="u-m-t-20" style="float: right;">
						<u-checkbox-group style="width: 20px;">
							<u-checkbox active-color="#4578F7" shape="circle" style="width: 20px;"
								v-model="item.checked" :name="item.name" @change="checkboxChange" ></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>

			</view>
		</view>
		
		<view class="cbg-white u-m-20 u-m-t-30 u-p-b-20" style="border-radius: 7px;">
			<view class="u-m-l-30 u-m-r-30">
				<view class="u-p-t-10 u-p-b-10" style="color: #354F60;">
					<u-input v-model="qxInput" type="textarea" :fixed="true" :auto-height="true" maxlength="150"
						placeholder="请输入您的反馈，我们将不断为您改进，已经核实的将尽快联系您" placeholder-style="font-size:13px;text-align: left;color:#AAAAAA"/>
				</view>
				
				<view class="cflex-r u-p-t-10 u-p-b-10">
					<view v-show="imgSrc" v-for="(item,index) in imgArr" class="cflex-r" style="align-items: center;position: relative;">
						<image mode="aspectFill" style="width: 100rpx;height: 100rpx;margin-right: 20rpx;" :src="item" @click="preview(item,index)"></image>
						<image src="../../static/my/del.png" style="width: 25rpx;height: 25rpx;position: absolute;top: -10rpx;right: 10rpx;" @tap="delImage(index)"></image>
					</view>
					<view style="border:1px dashed #AAAAAA;border-radius: 5px;height: 48px;" v-show="addPic">
						<image @tap="chooseImage()" style="height: 26px;width: 28px;padding: 10px;" src="../../static/my/picture.png"></image>
					</view>
					<!-- <view style="margin-left:15px;border:1px dashed #AAAAAA;border-radius: 5px;height: 48px;">
						<image @tap="chooseVideo()" style="height: 23px;width:38px;padding: 12px 5px;" src="../../static/my/video.png"></image>
					</view> -->
				</view>
				<view class="u-p-t-15" style="color: #354F60;">
					<view class="cflex-r u-font-10" style="align-items:center;width: 100%;color: #AAAAAA;">
						※最多只能上传3张图片（小于20M）
					</view>
				</view>
			</view>
		</view>
		
		<view class="u-m-20" style="background-color: #FFFFFF;border-radius: 15rpx;padding: 20rpx 15rpx;">
			<input v-model="phone" type="number" placeholder="请填写你的手机号(必填)" maxlength="11" />
		</view>
		
		<view class="u-m-20 u-m-t-40">
			<u-button type="primary" :custom-style="btnStyle"  @click="submitQuxiao()">确认申请</u-button>
		</view>
		
		<view>
			<u-modal v-model="show" :content="content" @confirm="agree()"></u-modal>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				qxInput: '',
				show: false,
				content: '您的申请已收到，请耐心等待',
				picnote: '',
				id: '',
				imgArr: [], //存放图片数组
				imgSrc: false,
				addPic: true,
				reason: [],
				note:'',
				list: [],
				btnStyle:{
					backgroundColor:"#4578F7",
					fontSize: "16px",
					color:"#fff",
					border:"0px",
					height: "40px"
					
				}
			}
		},
		onLoad({id}) {
			this.id = id;
			this.yuanYin();
		},
		onShow() {
			
		},
		methods: {
			yuanYin(){
				this.$request("config/shouHouConfigList").then(res=>{
					// // //console.log("原因=======>",res);
					// this.list = res.data;
					var tempList = [];
					for(var i=0;i<res.data.length;i++){
						var temp={}
						temp.name = res.data[i].name
						temp.checked = false
						tempList.push(temp);
					}
					this.list = tempList;
					 //console.log("list======>",this.list);
				})
			},
			// 同意取消订单
			agree(){
				uni.navigateBack({
					delta:2
				})
			},
			// 选择原因
			checkboxChange({value,name}){
				// // //console.log(name);
				// this.reason.push(name);
			},
			// 申请
			async submitQuxiao(){
				var lists=[];
				for(var i=0;i<this.list.length;i++){
					// // //console.log(this.list);
					if(this.list[i].checked==true){
						lists.push(this.list[i].name);
					}
				}
				this.reason = lists;
				if(this.reason=="" || this.phone==""){
					uni.showToast({
						icon:"none",
					    title: '申请售后原因/手机号不能为空',
					    duration: 2000
					});
					return;
				}else {
					uni.showLoading({
						title:'申请售后中，请耐心等待'
					});
					for(var i=0;i<this.imgArr.length;i++){
						
						let upRes=await this.upImg(i);
						let upRes3 = JSON.parse(upRes.data).url;
						this.picnote += upRes3+',';
						 //console.log("up",upRes3);
					}
					
					for(var i = 0 ;i<this.reason.length;i++){
						this.note += this.reason[i]+","
					}
					let noteItem =  this.note.substr(0,this.note.length-1);
					this.note = noteItem;
					// 删除对象最后的逗号
					let picnoteItem =  this.picnote.substr(0,this.picnote.length-1);
					this.picnote = picnoteItem;
					
					 //console.log(this.id,this.note,this.qxInput,this.picnote,this.phone);
					
					// 请求
					this.$request("shou/hou/submitShouHou",{orderId:this.id,cause:this.note,des:this.qxInput,urls:this.picnote,phone:this.phone}).then(res=>{
						 //console.log(res);
						this.show = true;
					uni.hideLoading();
					})
				}
			},
			upImg(i){
				 //console.log("img========>",this.imgArr);
				return new Promise((resolve,rejuct)=>{
					uni.uploadFile({
						url: this.$store.state.baseUrl + "common/up/single",
						filePath: this.imgArr[i],
						name: 'file',
						formData: {
							imgPath: this.imgArr[i],
						},
						success(res1) {
							resolve(res1)
						},
						fail(err){
							 //console.log(err);
						}
					})
				})
			},
			// 选择图片
			chooseImage(){
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						if(that.imgArr.length<3){
							that.imgArr = [...that.imgArr,...res.tempFilePaths];
						}
						if(that.imgArr.length==3){
							that.addPic = false
						}
						if(that.imgArr!=''){
							that.imgSrc = true
						}
					}
				});
			},
			// 选择视频
			chooseVideo(){
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {
						 //console.log(res);
					}
				});
			},
			// 点击删除图片
			delImage(index){
				let that = this
				that.imgArr.splice(index,1);
				that.addPic = true;
			},
			// 点击图片进行预览
			preview(img,index) {
				// // //console.log(img,index);
				 //console.log('预览')
				// 新建一个存放预览图片的空数组
				var imgArr = []
				imgArr.push(img);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							 //console.log(data);
							 //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (index + 1) + '张图片');
						},
						fail: function(err) {
							 //console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style>



</style>
